<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>设置</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
          .set-inline{
            height:0.8rem;
            line-height:0.8rem;
            margin-bottom:0.25rem;
          }
          .set-inline:nth-last-child(1){
            margin-bottom:0;
          }
          .set-inline>h3{
            font-weight:normal;
            font-size:0.3rem;
            color:#2F2F2F
          }
          .set-inline>div{
            font-size:0.3rem;
            color:#949494;
            padding-left:0.3rem;
            text-align:right;
          }
          .set-inline>div .right{
            width:0.18rem;
            vertical-align: middle;
            margin-top:-0.01rem;
            margin-left:0.2rem;
          }
          .set-inline>div .head{
            width:0.65rem;
            height:0.65rem;
            vertical-align: middle;
            margin-top:-0.01rem;
            border-radius:50%;
          }
          .set-inline>div .bindText{
            font-style:normal;
            color:#70BDFF;
            margin-left:0.26rem;
          }
          .set{
            background:#FFF;
            padding:0.38rem 0.35rem;
            margin-top:0.14rem;
          }
          .otherInfo{
            background:#FFF;
            padding:0.28rem 0.35rem;
            margin-top:0.14rem;
          }
          .exit{
            background:#FFF;
            padding:0.15rem 0.35rem;
            margin-top:0.14rem;
            margin-bottom:1.5rem;
          }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <template v-if="info !== null">
            <div class="set">
                <div class="set-inline disbox" @click="changeHead();">
                    <h3>头像</h3>
                    <div class="disflex ell">
                        <img :src="info.avatar + ('?time=' + new Date().getTime())" class="head" />
                        <img src="../../../image/icons/right.png" class="right" />
                    </div>
                </div>
                <div class="set-inline disbox" @click="$.openUrl('common/changeNick','common/changeNick',{title:'修改昵称', nick_name:info.nick_name});">
                    <h3>昵称</h3>
                    <div class="disflex ell">
                        {{info.nick_name}}
                        <img src="../../../image/icons/right.png" class="right" />
                    </div>
                </div>
                <div class="set-inline disbox" @click="$.openUrl('common/commonTitle','common/changeAlipay',{title:'支付宝绑定', referer: 'settings'});">
                    <h3>提现支付宝</h3>
                    <div class="disflex ell">
                        {{info.alipay_name}}
                        <img src="../../../image/icons/right.png" class="right" />
                    </div>
                </div>
                <div class="set-inline disbox" @click="$.openUrl('common/commonUser','common/changeMobile', {mobile: info.mobile});">
                    <h3>手机号码</h3>
                    <div class="disflex ell">
                        {{info.mobile}}
                        <img src="../../../image/icons/right.png" class="right" />
                    </div>
                </div>
                <div class="set-inline disbox" @click="$.openUrl('common/commonUser','common/changPass');">
                    <h3>修改密码</h3>
                    <div class="disflex ell">
                        <img src="../../../image/icons/right.png" class="right" />
                    </div>
                </div>
                <div class="set-inline disbox" v-if="iosTest==false">
                    <h3>QQ绑定</h3>
                    <div class="disflex ell" v-if="social.qq">
                        {{social.qq}}
                        <!-- <i v-if="false" @click="unbindSocial('qq')" class="bindText">解绑</i> -->
                    </div>
                    <div class="disflex ell" v-else>
                        <i @click="bindSocialQQ" class="bindText">绑定</i>
                    </div>
                </div>
                <div class="set-inline disbox" v-if="iosTest==false">
                    <h3>微信绑定</h3>
                    <div class="disflex ell" v-if="social.weixin">
                        {{social.weixin}}
                        <!-- <i v-if="false" @click="unbindSocial('weixin')" class="bindText">解绑</i> -->
                    </div>
                    <div class="disflex ell" v-else>
                        <i @click="bindSocialWeixin" class="bindText">绑定</i>
                    </div>
                </div>
                <!--div class="set-inline disbox">
                    <h3>个人中心保密</h3>
                    <div class="disflex ell">
                        <div class="checkboxDiv active">
                            <div class="checkboxBtn"></div>
                        </div>
                    </div>
                </div-->
            </div>
            <div class="otherInfo">
                <div class="set-inline disbox">
                    <h3>账户ID</h3>
                    <div class="disflex ell">
                        {{info.id}}
                    </div>
                </div>
                <div class="set-inline disbox">
                    <h3>注册时间</h3>
                    <div class="disflex ell">{{info.time_created | dateFormate}}</div>
                </div>
				<div class="set-inline disbox">
				    <h3>APP版本</h3>
				    <div class="disflex ell" v-text="api.appVersion"></div>
                </div>
                <div class="set-inline disbox">
                    <h3>隐私协议</h3>
                    <div class="disflex ell"><a style="color: #949494;" @click="scanPrivacyPolicy" href="javascript:;">点击查看</a></div>
                </div>
            </div>
            <div class="exit">
                <div class="set-inline disbox" @click="logout">
                    <h3>退出</h3>
                    <div class="disflex ell">
                        <img src="../../../image/icons/right.png" class="right" />
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="loadFull whiteBg">
                <div class="se-loading"></div>
            </div>
        </template>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var wxPlus = api.require('wxPlus');
            var QQ = api.require('QQPlus');

            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    info: null,
                    social: {},
                },
                filters: {
                    dateFormate: function(time){
                        return utils.tsToDateFormat(time, 'yyyy-MM-dd hh:mm');
                    },
                },
                methods:{
                    scanPrivacyPolicy: function(){
                        var privacyPolicyUrl = CONFIG.httpConfig.web[CONFIG.env] + '/privacyTcp/?app=1&time='+Date.now();
                        $.openUrl('common/outUrlCommonTitle', privacyPolicyUrl, {title:'用户隐私协议'});
                    },
                    adapterSocialInfo: function(social){
                        var temp = {};
                        var isArray = Object.prototype.toString.call(social) == '[object Array]';
                        social = isArray ? social : [];
                        for(var i=0; i< social.length; i++){
                            temp[social[i].type.tag.toLocaleLowerCase()] = social[i].nick_name;
                        }
                        return temp;
                    },
                    changeHead(){
                        api.getPicture({
                            sourceType: 'album',
                            encodingType: 'jpg',
                            mediaValue: 'pic',
                            destinationType: 'url',
                            quality: 80,
                        }, function(ret, err) {
                            if (ret && ret.data) {
                                $.openUrl('common/changeHead','common/changeHead',{srcPath:ret.data});
                            }
                        });
                    },
                    logout(){
                        var that = this;
                        $.confirm({
                            title: '提示',
                            msg: '真的要退出账号吗？',
                            buttons: ['取消','确定'],
							load:true,
                            success:function(){
        						$.ajax({
        							url: '/user/logout',
        							method: 'post',
        							success: function(res){
        								$.removeUser();
        								$.toast('退出成功');
										api.sendEvent({name: 'reshIndexBasic'});//刷新首页基本信息，比如红包样式
										
                                        api.sendEvent({
                                            name: 'navGetData',
                                            extra: {navIndex:3}
                                        });
										api.sendEvent({name: 'loginExit'});
                                        api.closeWin();
        							},
        							error: function(err){
        								$.toast(err.message);
        							}
        						});
                            },
                            error:function(){
                                // console.log("取消");
                            }
                        });
                    },

                    getUserDetail: function(load){
                        var _this = this;
                        $.ajax({
                            url: '/user/summary',
                            method: 'get',
							load:load,
                            success: function(res){
                                _this.info = res.data;
                                _this.social = _this.adapterSocialInfo(res.data.user_social_bind);
                            },
                            error: function(err){
                                $.toast(err.message);
                            }
                        });
                    },

                    unbindSocial: function(type){
                        var _this = this;
						$.confirm({
						    title: '提示',
						    msg: '解绑以后无法使用'+ (type=='qq'?'QQ':type=='wx'?'微信':'') +'快速登录，是否解绑？',
						    buttons: ['取消','确定'],
						    success:function(){
						        $.ajax({
						            url: '/user/social/unbind/'+type,
						            method: 'post',
						            load: true,
						            success: function(res){
						                _this.$set(_this.social, type, null );
						                delete _this.social[type];
						            },
						        });
						    }
						});
                    },

                    bindSocialQQ: function(){
                        var _this = this;
                        QQ.login({},function(ret, err) {
                            if(ret && ret.status){
                                _this.bindSocialQQCallback(ret);
                            }
                        });
                    },
                    bindSocialQQCallback: function(data){
                        var _this = this;
                        var access_token = data.accessToken;
                        var openid = data.openId;
                        $.ajax({
                            url: '/user/social/bind/qa/callback',
                            method: 'post',
                            load: true,
                            data: {
                                access_token: access_token,
                                openid: openid
                            },
                            success: function(res){
                                _this.getUserDetail(true);
                            }
                        });
                    },
                    bindSocialWeixin: function(){
                        var _this = this;
                        wxPlus.auth({}, function(authRet, authErr){
                            if(authRet && authRet.status){

                                wxPlus.getToken({
                                    code: authRet.code
                                }, function(ret, err){
                                    if(err.code == 0){
                                        _this.bindSocialWeixinCallbak(ret);
                                    }
                                });
                            }
                        });
                    },
                    bindSocialWeixinCallbak: function(data){
                        var _this = this;
                        var access_token = data.accessToken;
                        var openid = data.openId;
                        $.ajax({
                            url: '/user/social/bind/weixinapp/callback',
                            method: 'post',
                            load: true,
                            data: {
                                access_token: access_token,
                                openid: openid
                            },
                            success: function(res){
                                _this.getUserDetail(true);
                            }
                        });
                    }
                },
                mounted(){
					$.initJs(this);
                    this.getUserDetail();
                }
            });

            api.addEventListener({name: 'updateSettingsPage'}, function(ret, err){
                app.getUserDetail();
            });
        }
    </script>
</body>
</html>
